<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>登录注册忘记密码页面</title>
    <link rel="stylesheet" href="css/normalize.min.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <div id="formContainer" class="dwo">
      <div class="formLeft">
        <img src="images/avatar.png" />
      </div>
      <div class="formRight">
        <!-- Login form -->
        <form id="login">
          <header>
            <h1>欢迎回来</h1>
            <p>请先登录</p>
          </header>
          <section>
            <label>
              <p>用户名</p>
              <input type="text" id="userName" />
              <div class="border"></div>
            </label>
            <label>
              <p>密码</p>
              <input type="password" id="pwd" />
              <div class="border"></div>
            </label>
            <button type="button" id="loginButton">登 录</button>
          </section>
          <footer>
            <a href="#">忘记密码</a>
            <a href="register.html" id="registerBtn">注册新用户</a>
          </footer>
        </form>
      </div>
    </div>
    <script>
      document.getElementById('loginButton').onclick = function(){
          //1.获取用户输入用户名和密码
          var userName = document.getElementById('userName').value;
          var pwd = document.getElementById('pwd').value;
          //2.获取本地存储的数据 将数据解析为对象
          var userInfo = JSON.parse(localStorage.getItem('userInfo'));
         //如果没有内容，跳转到注册页面
         if( !userInfo ){
            alert('请先注册信息!');
            location.href = 'register.html';
            return true;
         }else{
           //验证用户名和密码
            if( userInfo.userName != userName || userInfo.pwd != pwd){
              alert('用户名或密码错误！')
              return false;
            }
         }
         //用户名和密码正确 跳转到主页
         location.assign('index.html');
      }
    </script>
  </body>
</html>
